<template>
  <el-card :shadow="'never'" style="border: none">
    <el-row :gutter="20">
      <el-col :span="18" style="text-align: left"
        ><el-input v-model="val" placeholder="请输入名称" :prefix-icon="Search"
      /></el-col>
      <el-col
        :span="4"
        style="
          padding-left: 0;
          cursor: pointer;
          display: flex;
          align-items: center;
          font-size: larger;
        "
      >
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="status === 'expand' ? '展开' : '收缩'"
          placement="top"
        >
          <el-icon
            ><Expand v-if="status === 'expand'" @click="click('fold')" /><Fold
              v-else
              @click="click('expand')"
          /></el-icon>
        </el-tooltip>
      </el-col>
    </el-row>

    <el-tree
      ref="treeRef"
      style="margin-top: 15px"
      :data="data"
      show-checkbox
      node-key="id"
      :default-checked-keys="expandAll"
      :filter-node-method="filterNode"
    />
  </el-card>
  <div class="dialog-footer">
    <el-button @click="helper.close()">取消</el-button>
    <el-button type="primary" @click="save()">保存</el-button>
  </div>
</template>

<script lang="ts" setup name="sys-acl-tree">
import { TRecord } from "@/components/crud/interface";
import { Drawer } from "@/components/model";
import { NzSafeAny } from "@/components/sf/type";
import { Http } from "@/core/api/http.service";
import { Helper } from "@/core/helper/helper.service";
import { Search, Expand, Fold } from "@element-plus/icons-vue";
import { ElTree } from "element-plus";
import { Subject } from "rxjs";
import { ref, watch } from "vue";
type TreeMenu = {
  id: string;
  label: string;
  children: TreeMenu[];
  disabled: boolean;
};
const props = defineProps<{
  helper: Drawer;
  openSub: Subject<null>;
  record?: TRecord;
  i: Record<string, NzSafeAny>;
}>();
const treeRef = ref<InstanceType<typeof ElTree>>();
const val = ref("");
const expandAll = ref<string[]>([]);
const status = ref("expand");
const data = ref<TreeMenu[]>([]);
watch(val, (res: string) => {
  if (treeRef.value) {
    treeRef.value!.filter(res);
  }
});
const click = (key: string) => {
  status.value = key;
  if (key === "fold") {
    Object.values(treeRef.value!.store.nodesMap).forEach(v => v.expand());
  } else {
    Object.values(treeRef.value!.store.nodesMap).forEach(v => v.collapse());
  }
};
const filterNode = (value: string, data: NzSafeAny) => {
  if (!value) return true;
  return data.label.includes(value);
};
if (props.i?.role) {
  Http.of()
    .get(`/lc-system/menu/tree/acl/${props.i?.role}`)
    .then((r: { data: TreeMenu[]; keys: string[] }) => {
      data.value = r.data || [];
      expandAll.value = r.keys || [];
    });
}
const save = () => {
  if (props.i?.role) {
    Http.of()
      .post("/lc-system/permission/batch/role", {
        role: props.i.role,
        permissions: treeRef.value.getCheckedKeys(true) || []
      })
      .then(() => {
        Helper.showMessage("权限点更新成功");
        props.helper.close(true);
      });
  }
};
</script>
